import React from 'react'
import { Route } from 'react-router-dom/cjs/react-router-dom.min'
import About from './components/About'
import Home from './components/Home'
import Menu from './components/Menu'
import MyForm from './components/MyForm'
import Student from './components/Student'

export default function App() {
  return (
    <div>
      App
      <Menu></Menu>
      {/* 
        将组件和路由进行对应 
          使用Route来映射地址和组件
            属性：
              path 映射url地址
              component 要挂载的组件
          当Route路径被访问，其对应组件就会自动挂载
            注意 默认情况下url不是严格匹配（严格匹配加上exact属性）
              只要url地址头部和path一致就会挂载，不会检查子路径

          component需要直接传递组件类
            通过component构建的组件，它会自动创建组件并且会自动传递参数:
            (子组件中的props)
              match -- 匹配信息
                isExact 检查路径是否完全匹配上，无子路径
                params 请求参数,/about/:xxx,params={xxx: 参数值}
                  如/about/:id，/about/123，params={id: 123}；
              location -- 地址信息
                search 查询字符串，/about?name=admin search: '?name=admin'
              history -- 历史记录信息，控制页面跳转
                push() 跳转页面
                replace() 替换页面
                可通过state传参，如
                  props.history.push({
                    pathname: '/student/2',
                    state: {name: '哈哈'}
                  });
      */}
      <Route path="/" component={Home} exact></Route>
      <Route path="/about" component={About}></Route>
      {/* 
        render也可以用来指定要挂载的组件
          render需要一个回调函数作为参数，回调函数的返回值会最终被挂载
          render 不会自动传递match、history、location三个参数
      */}
      <Route path='/student/:id' render={(routeProps) => <Student {...routeProps} />}></Route>
      {/* 
        children 也可以用指定被挂载的组件
          用法两种：
            1、 与render相似，传递回调函数
              当children设置回调函数时，该组件无论路径是否匹配都会被挂载
            2、传递组件，匹配时才会挂载
      */}
      {/* <Route path='/student/:id' children={(routeProps) => <Student {...routeProps} />}></Route> */}
      <Route path='/student/:id' children={<Student />}></Route>
      {/* 传统嵌套 */}
      {/* <Route path='/about'>
        <About></About>
        <Route path='/about/hello'>
          <Hello />
        </Route>
      </Route> */}
      <Route path='/myform'>
        <MyForm />
      </Route>
    </div>
  )
}
